<template>
  <div>
    <el-form :model="searchForm" inline size="small">
      <el-form-item label="公司名称：">
        <el-input
          v-model="searchForm.enterpriseName"
          placeholder="请输入公司名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="统一社会信用代码：">
        <el-input
          v-model="searchForm.creditCode"
          placeholder="请输入统一社会信用代码"
          clearable
        />
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input
          v-model="searchForm.legalPerson"
          placeholder="请输入姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="匹配状态：">
        <el-select
          v-model="searchForm.matchStatus"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in matchStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
        <el-button icon="el-icon-search" type="primary" @click="getList"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div style="margin-top: 10px">
      <el-table
        size="mini"
        v-loading="listLoading"
        border
        :data="tableData.data"
      >
      <el-table-column
          prop="id"
          width="60"
          align="center"
          label="方案Id"
        ></el-table-column>
      <!-- <el-table-column
          prop="registerTime"
          align="center"
          label="会员注册时间"
        ></el-table-column>
      <el-table-column
          prop="nickname"
          align="center"
          label="昵称"
        ></el-table-column> -->
        
    
        <el-table-column
          prop="creditCode"
          align="center"
          label="统一社会信用代码"
        ></el-table-column>
        <el-table-column prop="enterpriseName" align="center" label="公司名称">
          <template slot-scope="scope">
            <span>{{ scope.row.enterpriseName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.legalPerson || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="企业类型">
          <template slot-scope="scope">
            <span v-if="scope.row.matchType == 1">企业</span>
            <span v-if="scope.row.matchType == 2">个体工商户</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="联系方式"
          prop="phone"
        ></el-table-column>
        <el-table-column align="center" label="匹配类型">
          <template slot-scope="scope">
            <span v-if="scope.row.matchStep == 0"> 答题匹配</span>
            <span v-if="scope.row.matchStep == 1"> 税务匹配</span>
            <span v-if="scope.row.matchStep == 2"> 征信匹配</span>
            <span v-if="scope.row.matchStep == 3"> 客服匹配</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="匹配状态">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.listClass">{{
              scope.row.dictLabel
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="updateTime"
          label="提交时间"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="cusManage"
          label="客户经理"
        ></el-table-column>
        <el-table-column align="center" label="征信录入">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.matchStep == 2"
              type="text"
              @click="conditionEntry(scope.row)"
            >
              <span v-if="scope.row.entered == 0">{{ "未录入" }}</span>
              <span v-if="scope.row.entered == 1">{{ "编辑" }}</span>
            </el-button>
            <span v-if="scope.row.matchStep == 1">-</span>
            <el-button
              v-if="scope.row.matchStep == 2 && scope.row.entered == 3"
              type="text"
              @click="clickHandle(scope.row)"
              >详情</el-button
            >
            <el-button
              v-if="scope.row.matchStep == 3"
              type="text"
              @click="clickHandle(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="center" prop="contactStatus" label="客服沟通">
          <template slot-scope="scope">
            <div @click="goCommunication(scope.row)">
              <el-button v-if="scope.row.contactStatus == '0'" type="text"
                >未沟通</el-button
              >
              <el-button v-if="scope.row.contactStatus == '1'" type="text"
                >沟通中</el-button
              >
              <el-button v-if="scope.row.contactStatus == '2'" type="text"
                >沟通成功</el-button
              >
              <el-button v-if="scope.row.contactStatus == '3'" type="text">
                -</el-button
              >
              <el-button v-if="scope.row.contactStatus == '4'" type="text"
                >详情</el-button
              >
            </div>
          </template>
        </el-table-column>
       <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="detail(scope.row)">详情</el-button>
            <el-button
              v-if="scope.row.matchStatus == 14 || scope.row.matchStatus == 15"
              type="text"
              v-btnpermission="$btnPer.customerMatchBtnrules.developPlan"
              @click="match(scope.row)"
              >出额度</el-button
            >
            <el-button type="text" @click="manyTouser(scope.row)"
              >分配客户经理</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
    <secondCampany :managerList="managerList" :matchStatusList="matchStatusList" ref="secondCampanyRef"></secondCampany>


    <dialog-diy
      ref="dialogDiytaxRef"
      title="详情"
      style=""
      @handleClose="closeDialogTax"
    >
      <div
        style="
          max-height: 70vh;
          overflow-y: auto;
          height: 800px;
          padding: 0 20px;
        "
      >
        <credit-information
          :creditInformation="detailInfo"
          :detailInfo="detailInfo"
        ></credit-information>
      </div>
    </dialog-diy>

    <el-dialog
      @close="closeMany"
      title="分配客户经理"
      :visible.sync="manyDesable"
      width="600px"
    >
      <div style="padding-bottom: 30px; margin-top: 10px">
        <div style="margin-bottom: 20px">
          <span style="color: #222; font-weight: bold">所属客户经理：</span>
          <span>
            <el-select
              size="small"
              style="width: 300px"
              v-model="manyForm.managerId"
              clearable
              placeholder="请选择所属经理"
              filterable
            >
              <el-option
                v-for="item in managerList"
                :key="item.id"
                :label="item.name + ' ' + '(' + item.phone + ')'"
                :value="item.id"
              />
            </el-select>
          </span>
        </div>
        <div class="tabbleContainer">
          <el-table :data="manyForm.companyIdList" border size="mini">
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column
              align="center"
              label="公司名称"
              prop="enterpriseName"
            ></el-table-column>
            <el-table-column
              align="center"
              label="税号"
              prop="creditCode"
            ></el-table-column>
            <el-table-column
              align="center"
              label="已分配客户经理"
              prop="cusManage"
            ></el-table-column>
          </el-table>
        </div>

        <div style="display: flex; justify-content: center; padding-top: 20px">
          <el-button
            style="width: 100px"
            size="mini"
            type="primary"
            @click="submitMany"
            >确定</el-button
          >
          <el-button style="width: 100px" size="mini" @click="closeMany"
            >取消</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCmsMatchList,
  getCustomerManagerList,
  updateAllCutomerManager
} from "@/api/customer";
import dialogDiy from "../../../../components/dialogDiy/index.vue";
import { getDictData } from "../../../../utils/dict";
import { downloadFileByUrl } from "@/utils/downloadFile";
import creditInformation from "./creditInformation.vue";
import secondCampany from "./secondCampany.vue";
export default {
  name: "campanyTable",
  components: {
    dialogDiy,
    creditInformation,
    secondCampany,
  },
  data() {
    return {
      listLoading: false,
      activeName: "first",
      tableData: {
        data: [],
        total: 0
      },
      detailInfo: {},
      searchForm: {
        enterpriseName: "", //公司名称
        creditCode: "", //统一社会信用代码
        legalPerson: "", //法人
        matchStatus: "", //匹配状态
        matchType: "",
        pageNum: 1,
        pageSize: 10
      },

      managerList: [],

      manyForm: {
        companyIdList: [],
        managerId: null
      },
      type: null,
      isQuestion: false,
      matchTypeList: [],
      matchStatusList: [],
      manyDesable: false
    };
  },
  async created() {
    const res = await getCustomerManagerList();
    this.managerList = res.data.map(v => {
      return {
        name: v.nickName,
        id: v.adminId,
        phone: v.phoneNumber
      };
    });
  },
  async mounted() {
    this.matchTypeList = await this.$getDictData("match_type");
    this.matchStatusList = await this.$getDictData("match_status");
    this.getList();
  },
  methods: {
    manyTouser(data) {
      this.detailInfo = data;
      console.log(data, 'data');

      this.manyDesable = true;
      this.manyForm.companyIdList = [data, ...data.child];
    },
    closeMany() {
      this.manyForm = {
        companyIdList: [],
        managerIdList: []
      };
      this.manyDesable = false;
    },
    submitMany() {
      if (!this.manyForm.managerId) {
        this.$message({
          message: "请选择客户经理",
          type: "warning"
        });
      } else {
        let params = {
          managerId: this.manyForm.managerId,
          creditCode: this.detailInfo.creditCode,
          matchType: this.detailInfo.matchType,
        };
        updateAllCutomerManager(params).then(res => {
          if (res.data) {
            this.$message({
              message: "分配成功",
              type: "success"
            });
            this.manyDesable = false;
            this.getList();
          }
        });
      }
    },
    exportExcel() {
      downloadFileByUrl("客户方案", this.searchForm);
    },
    goCommunication(val) {
      if (val.contactStatus !== "3") {
        this.$router.push({
          name: "communication",
          query: val
        });
      }
    },
    closeDialogTax() {
      this.detailInfo = {};
      this.$refs.dialogDiytaxRef.handleClose();
    },

    conditionEntry(row) {
      this.$router.push({
        path: "/conditionEntry",
        query: {
          id: row.id,
          machType: row.matchType,
          canpamyName: row.enterpriseName
        }
      });
    },
    match(row) {
      if (row.matchStep == 2) {
        this.$router.push({
          path: "/customerMatchDetail",
          query: {
            data: JSON.stringify(row),
            type: 1
          }
        });
      }
      if (row.matchStep == 3) {
        this.$router.push({
          path: "/creditLimitInfor",
          query: row
        });
      }
    },
    handleClick() {},
    clickHandle(row) {
      this.$refs.dialogDiytaxRef.openlog();
      this.detailInfo = row;
    },
    detail(row) {
      this.$refs.secondCampanyRef.openlog(row)
      // this.type = row.matchType;
      // this.isQuestion = row.question;
      // console.log(row);

      // this.detailInfo = row;
      // console.log(row);
      // this.$nextTick(() => {
      //   if (this.isQuestion) {
      //     this.activeName = "four";
      //   }
      //   this.$refs.dialogDiy.openlog();
      // });
    },

    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    statusfun(v) {
      const obj = this.matchStatusList.find(item => item.value === v);
      return obj;
    },
    getList() {
      this.listLoading = true;
      getCmsMatchList(this.searchForm)
        .then(res => {
          res.data.list.forEach(v => {});
          this.listLoading = false;
          res.data.list.forEach(v => {
            v.parentId = 0;
            v.dictLabel = this.statusfun(v.matchStatus).dictLabel;
            v.listClass = this.statusfun(v.matchStatus).listClass;
            if (v.child.length > 0) {
              v.child.forEach(item => {
                item.dictLabel = this.statusfun(item.matchStatus).dictLabel;
                item.listClass = this.statusfun(item.matchStatus).listClass;
              });
            }
          });
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    reset() {
      this.searchForm = {
        enterpriseName: "", //公司名称
        creditCode: "", //统一社会信用代码
        legalPerson: "", //法人
        matchStatus: "", //匹配状态
        matchType: "",
        pageNum: 1,
        pageSize: 10
      };
      this.getList();
    }
  }
};
</script>

<style scoped lang="scss">
//.second-table {
//  /deep/ .el-table .el-table th .el-table__cell {
//    border-bottom: none;
//  }
//}
.tabbleContainer {
  max-height: 800px;
  overflow-y: scroll;
}
/deep/ .el-dialog__body {
  padding: 0 20px;
}

/deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
  //display: none;
}
</style>
